<template>
	<view class="page-flex wallet">
		<uv-navbar
			autoBack
			title="我的钱包"
			title-style="color: #ffffff"
			style="color: #ffffff"
			bg-color="#009a44"
			right-text="收支明细"
			left-icon-color="#ffffff"
		></uv-navbar>
		<view class="wallet-card">
			<view class="block">
				<view class="label">我的余额(元)</view>
				<view class="value">{{ formatBalance }}</view>
			</view>
		</view>
		<view class="content">
			<view class="button">
				<uv-button text="提现" color="#009a44" shape="circle"></uv-button>
			</view>
			<view class="tips">
				<uv-text text="平台支持实时提现,24小时只可提现一次" prefix-icon="info-circle"></uv-text>
			</view>
			<view class="cell">
				<uv-cell-group>
					<uv-cell title="绑定提现账户" value="未绑定" is-link clickable></uv-cell>
				</uv-cell-group>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

const uniIdCo = uniCloud.importObject("uni-id-co");

const balance = ref(0);

const formatBalance = computed(() => {
	return balance.value.toFixed(2);
});

const handleGetAccountBalance = async () => {
	const response = await uniIdCo.getAccountBalance();
	if (response.errCode == 0) {
		balance.value = response.balance;
	}
};

onShow(() => {
	handleGetAccountBalance();
});
</script>

<style lang="scss" scoped>
.wallet {
	background-color: #f7f7f7;

	.wallet-card {
		background-color: #009a44;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;

		.block {
			text-align: center;

			.label {
				color: #ffffff;
				margin-bottom: 10px;
			}
			.value {
				font-size: 24px;
				color: $uni-color-primary;
				font-weight: bold;
			}
		}
	}

	.content {
		flex: 1;

		.button {
			padding: 20px;
		}

		.tips {
			padding-left: 20px;
		}

		.cell {
			margin-top: 20px;
		}
	}
}
</style>
